<template>
    <div class="container">
        <div class="home-body">
            <tbkBody :list="state.list"></tbkBody>
        </div>
        <div style="text-align: center; background: #fff; padding: 20px 0">
            <nuxtPagination :pageSize="20" :total="state.total" :currentPage="state.page" :prePath="'/tbk/page/'">
            </nuxtPagination>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { getShopListApi } from "./api";
import { reactive } from "vue"
import { toReactive } from "@vueuse/shared";
import nuxtPagination from "@/components/common/nuxtPagination.vue"
import tbkBody from "@/components/tbk/tbkBody.vue"

useHead({
    title: "优乐购 - javascript技术分享",
    meta: [
      { name: 'description', content: "优乐购 - javascript技术分享" },
      { name: 'keywords', content: "优乐购" }
    ]
  })

let state = reactive({
    list: [],
    total: 0,
    page: 1
})

const getList = async () => {
    // 通过异步请求回来的数据都会存储在页面 payload 中。意味着，可能会存在没有用在你的组件的数据也加载到了 payload 中。我们强烈推荐你只选取必须使用在组件上的数据
    let { data } = toReactive(await useFetch(getShopListApi + 1)) as any;
    state.list = data.data.result
    state.total = data.data.total
}

getList()
</script>
  
<style lang="scss" scoped>
.container {
    .home-body {
        display: flex;
        flex-wrap: wrap;
        background: #fff;

        .goodBodyComp {
            display: flex;
            flex-wrap: wrap;
            padding: 5px;

            .tbk-item:hover {
                border: 1px solid #ff5000;
            }

            .tbk-item {
                display: inline-block;
                width: 180px;
                padding: 8px;
                border: 1px solid #f4f4f4;
                cursor: pointer;
                background: #fff;

                .item-img {
                    width: 160px;
                    height: 160px;
                }

                .item-title {
                    display: block;
                    height: 40px;
                    line-height: 20px;
                    overflow: hidden;
                    margin: 8px 0;
                    color: #666;
                    font-size: 12px;
                }

                .item-sale-info {
                    color: #999;
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;

                    .zk_final_price {
                        color: #ff5000;
                        font-size: 18px;
                    }

                    .reserve_price {
                        color: #999;
                        font-size: 12px;
                        text-decoration: line-through;
                    }

                    .rmbicon {
                        font-size: 12px;
                    }

                    .volume {
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
</style>
  